<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'

// 声明响应式变量
const serverMessage = ref('')
const connectionError = ref('')
let ws = null // WebSocket 实例（非响应式）

function playAudio() {
  const audio = new Audio('../../public/飞船报警音.mp3') // 替换为你的 MP3 文件路径
  audio.play().catch((error) => {
    console.error('音频播放失败：', error)
  })
}
// 方法：发送消息
function sendMessage() {
  playAudio()
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send('你好呀，今天是2024-12-31号!')
    console.log('发送消息1')
  }
  else {
    console.warn('WebSocket 未连接，无法发送消息')
  }
}

// 方法：初始化 WebSocket
function setupWebSocket() {
  const username = '15123059793'
  const wsUrl = `ws://www.cqwuyang.cn/ElectricManageService/webSocket/${username}`

  ws = new WebSocket(wsUrl)

  ws.onopen = () => {
    console.log('WebSocket 连接已建立')
  }

  ws.onmessage = (event) => {
    console.log('服务端消息：', event.data)
    serverMessage.value = event.data // 更新服务端消息
  }

  ws.onclose = () => {
    console.log('WebSocket 连接已关闭')
  }

  ws.onerror = (error) => {
    console.error('WebSocket 错误：', error)
    connectionError.value = JSON.stringify(error) // 更新错误信息
  }
}

// 生命周期钩子：组件挂载时建立 WebSocket 连接
onMounted(() => {
  setupWebSocket()
})

// 生命周期钩子：组件卸载时关闭 WebSocket 连接
onBeforeUnmount(() => {
  if (ws) {
    // ws.close();
  }
})
</script>

<template>
  <div>
    <h1>WebSocket 测试</h1>
    <p>服务端消息：{{ serverMessage }}</p>
    <button @click="sendMessage">
      发送消息
    </button>
    <p v-if="connectionError" style="color: red;">
      连接错误：{{ connectionError }}
    </p>
  </div>
</template>
